<!--
名称: 按钮组件
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <div id="Abutton">
        <el-button
            type="primary" :icon="icon" @click="buttonClick" :size="size"> {{buttonName}}</el-button>
    </div>
</template>

<script>
    export default {
        name: 'AButton',
        props: {
            buttonName: {
                type: String
            },
            icon: {
                type: String
            },
            size: {
                type: String
            }
        },
        methods: {
            buttonClick () {
                this.$emit('click')
            }
        }
    }
</script>

<style scoped>
  #Abutton
    .el-button--primary {
        color: white;
        background-color: #f04959;
        border-radius: 4px !important;
        border-color: #f04959 !important;
    }
    .el-button--primary:hover {
        color: #000000 !important;
        background-color: white !important;
        border-radius: 4px !important;
        border-color: #f04959 !important;
    }
    .el-button--primary:active {
        color: #000000 !important;
        background-color: white !important;
        border-radius: 4px !important;
        border-color: #4299ce !important;
    }
  .el-button--primary:focus {
      color: #000000 !important;
      background-color: white !important;
      border-radius: 4px !important;
      outline:none;
      border-color: #f04959 !important;
  }
</style>
